import styles from './index.module.less';

import { IPartInfo } from '@/types';

interface IProps {
  panelInfo: IPartInfo;
}

export const PartInfo = (props: IProps) => {
  const { panelInfo } = props;

  return (
    <div className={styles.container} style={{ display: panelInfo ? 'block' : 'none' }}>
      <div className={styles.title}>零件FO信息</div>
      <div className={styles.item}>
        <div className={styles.itemLabel}>任务序列号</div>
        <div className={styles.itemValue}>{panelInfo?.foNo}</div>
      </div>
      <div className={styles.item}>
        <div className={styles.itemLabel}>零组件编号</div>
        <div className={styles.itemValue}>{panelInfo?.partNo}</div>
      </div>
      <div className={styles.item}>
        <div className={styles.itemLabel}>零组件名称</div>
        <div className={styles.itemValue}>{panelInfo?.partName}</div>
      </div>
      <div className={styles.item}>
        <div className={styles.itemLabel}>零组件版本</div>
        <div className={styles.itemValue}>{panelInfo?.partVersion}</div>
      </div>
      <div className={styles.item}>
        <div className={styles.itemLabel}>表面状态</div>
        <div className={styles.itemValue}>{panelInfo?.surfaceStatus}</div>
      </div>
      <div className={styles.item}>
        <div className={styles.itemLabel}>数量/个</div>
        <div className={styles.itemValue}>{panelInfo?.partNum}</div>
      </div>
      <div className={styles.item}>
        <div className={styles.itemLabel}>长</div>
        <div className={styles.itemValue}>{panelInfo?.partLength}</div>
      </div>
      <div className={styles.item}>
        <div className={styles.itemLabel}>宽</div>
        <div className={styles.itemValue}>{panelInfo?.partWidth}</div>
      </div>
      <div className={styles.item}>
        <div className={styles.itemLabel}>高</div>
        <div className={styles.itemValue}>{panelInfo?.partHeight}</div>
      </div>
      <div className={styles.item}>
        <div className={styles.itemLabel}>是否军检</div>
        <div className={styles.itemValue}>{panelInfo?.checkType ? '是' : '否'}</div>
      </div>
    </div>
  );
};
